<template>
  <div class="basic_info" style="font-weight:bold">
    <el-row class="block2" v-if="!is_questionnaire_detail">
      <el-col :span="24">
        <!-- <div class="doctor_avtar">
          <span>{{avatar}}</span>
        </div> -->
        <div class="specific_info">
          <div class="doctor_name">
            <span>{{ doctor_info.name }}</span>
            <img src="../assets/common/man.svg" alt="" v-if="doctor_info.sex === '男'">
            <img src="../assets/common/woman.svg" alt="" v-if="doctor_info.sex === '女'">
            <!-- <el-tag size="mini" type="success" effect="dark">{{doctor_info.position}}</el-tag> -->
          </div>
          <div class="hospital">
            <span>{{ doctor_info.hospital }}</span>
          </div>
          <div class="department">
            <span>{{ doctor_info.department }}</span>
          </div>
          <div class="department">
            <span>{{ contactBackup }}</span>
          </div>
          <el-tag size="mini" type="success" effect="dark">{{ doctor_info.position }}</el-tag>
        </div>
        <div v-if="is_supplement" style="position:absolute;right:0;top:0">
          <el-button type="success" size="mini" @click="visitRegistration">拜访登记</el-button>
        </div>
      </el-col>
    </el-row>
    <el-tabs v-model="activeName" v-if="!is_questionnaire_detail">
      <el-tab-pane label="拜访记录" name="visitRecord">
        <el-tabs v-model="activeVisit" class="basic_content" @tab-click="getVisitRecord">
          <el-tab-pane
            v-for="item in doctor_info.visitRecord"
            :key="item.project_id"
            :label="item.project_name"
            :name="item.project_id">
            <div class="infinite-list-wrapper" style="overflow:auto">
              <ul
                class="list"
                v-infinite-scroll="loadMore"
                infinite-scroll-disabled="disabled"
                infinite-scroll-distance="10"
                infinite-scroll-immediate-check="false"
                style="list-style:none;margin:0;padding:0;">
                <li
                  v-for="val in visit_record"
                  :key="val.id"
                  class="block2 list-item"
                  style="padding: 10px 15px;margin-top: 10px">
                  <p
                    style="font-size: 16px;color: rgba(0, 0, 0, 0.7);font-weight:500;display:inline-flex;align-items:center;margin-bottom:12px;">
                    <span style="margin-right: 8px" v-if="val.callStartTime">{{ val.callStartTime }}</span>
                    <el-tag size="mini" type="success" effect="dark"
                            :style="{backgroundColor:val.bgcolor,color:val.color}">{{ val.callStatus }}
                    </el-tag>
                  </p>
                  <!-- <el-divider></el-divider> -->
                  <el-tag
                    class="supplement"
                    size="mini"
                    type="success"
                    effect="dark"
                    v-if="val.isFillIn === true && is_supplement && val.is_supplement_visit === true"
                    @click="supplement_call_info(val)">
                    补填
                  </el-tag>
                  <div
                    style="font-weight: 400;font-size: 13px;font-family: PingFangSC-Regular, PingFang SC;line-height: 20px;">
                    <p class="item"><span class="label">通话时长：</span><span class="value">{{ val.callDuration }}s</span>
                    </p>
                    <p class="item"><span class="label">代表：</span><span class="value">{{ val.repName }}</span></p>
                    <p class="item"><span class="label">拜访目的：</span><span
                      class="value">{{ val.purposeItem ? val.purposeItem : '无' }}</span>
                    </p>
                    <p class="item"><span class="label">拜访结果：</span><span
                      class="value">{{ val.resultItem ? val.resultItem : '无' }}</span>
                    </p>
                    <div class="item">
                      <span class="label">备注：</span>
                      <span class="value">{{ val.memo ? val.memo : '无' }}</span>
                    </div>
                  </div>
                </li>
              </ul>
              <p class="loading" v-if="visit_loading">加载中...</p>
              <p class="more" v-if="noMore">没有更多了</p>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="医生标签" name="doctorLabel">
        <el-tabs v-model="doctorBasicLabel" class="basic_content" @tab-click="getDoctorProjectLabel">
          <el-tab-pane label="基础标签" name="">
            <div v-for="(item,index) in doctor_basic_label" :key="index">
              <div class="block2" style="padding: 10px 15px;margin-top: 10px">
                <p style="font-size: 16px;color: rgba(0, 0, 0, 0.7);margin-bottom:12px;">
                  <span>{{ item.tagClassifyName }}</span></p>
                <!-- <el-divider></el-divider> -->
                <div
                  style="font-weight: 400;font-size: 13px;font-family: PingFangSC-Regular, PingFang SC;line-height: 20px;">
                  <p class="item" v-if="item.tagClassifyName === '医院标签'">
                    <span class="label">医院：</span>
                    <span class="value">{{ doctor_info.hospital }}</span>
                  </p>
                  <p class="item" v-if="item.tagClassifyName === '医院标签'">
                    <span class="label">省份：</span>
                    <span class="value">{{ doctor_info.hcoProvince }}</span>
                  </p>
                  <p class="item" v-if="item.tagClassifyName === '医院标签'">
                    <span class="label">城市：</span>
                    <span class="value">{{ doctor_info.hcoCity }}</span>
                  </p>
                  <p class="item" v-if="item.tagClassifyName === '医生标签'">
                    <span class="label">医生职称：</span>
                    <span class="value">{{ doctor_info.techTitle }}</span>
                  </p>
                  <p class="item" v-if="item.tagClassifyName === '医生标签'">
                    <span class="label">医生职务：</span>
                    <span class="value">{{ doctor_info.executeTitle }}</span>
                  </p>
                  <p class="item" v-for="(val,index) in item.tag_list" :key="index">
                    <span class="label">{{ val.tag_name }}：</span>
                    <span class="value">{{ val.option_name }}</span>
                  </p>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane
            v-for="item in doctor_info.project"
            :key="item.project_id"
            :label="item.project_name"
            :name="item.project_id">
            <div class="block2" style="margin-top: 10px" v-if="project_tag[0]">
              <div
                style="font-weight: 400;font-size: 13px;font-family: PingFangSC-Regular, PingFang SC;line-height: 20px;">
                <p class="item"
                   v-for="(val,index) in project_tag[0].tag_list"
                   :key="index">
                  <span class="label">{{ val.tag_name }}</span>：
                  <span class="value">{{ val.option_name }}</span>
                </p>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="微信记录" name="wechatRecord">
        <div class="wechat_rept" v-if="wechat_rept_info.length">
          <span class="name" style="font-weight:400">微信代表：</span>
          <el-select
            v-model="wechat_rept_name"
            placeholder="请选择微信代表"
            filterable
            clearable
            @change="getWechatTalkInfo(wechat_rept_name)"
            v-if="is_multiple_wechat_rept">
            <el-option
              v-for="item in wechat_rept_info"
              :key="item.repId"
              :label="item.name"
              :value="item.repId">
            </el-option>
          </el-select>
          <span v-else style="font-weight:400">{{ wechat_rept_user }}</span>
        </div>
        <div class="basic_content block2 box wechat_box">
          <div class="wx_chat_record" v-if="wechat_info && wechat_info.length">
            <div class="up">
              <img v-if="wechat_info.is_up" src="../assets/image/up.png" alt="" @click="get_next_page_info">
            </div>
            <div class="content">
              <div
                :class="{main:item.is_doctor === false ? false : true,main_right:item.is_doctor === true ? false : true}"
                v-for="item in wechat_info" :key="item.id">
                <div class="talk_content" v-if="item.is_doctor === true">
                  <span class="user_name" style="display:none">{{ item.user_name | subName }}</span>
                  <span
                    :class="{
                      talk:true,
                      talk_flex:item.msgContent && item.msgContent.length >= 30 ? true : false,
                      talk_image:item.msgType === 'image' || item.msgType === 'emotion' ? true : false,
                      talk_link:item.msgType === 'link' ? true : false,
                      talk_audio:item.msgType === 'voice' ? true : false,
                      talk_left_image:item.msgType === 'image' || item.msgType === 'emotion' ? true : false,
                      talk_left_link:item.msgType === 'link' ? true : false,
                      talk_left_video:item.msgType === 'video' ? true : false,
                      }">
                    <!-- 文字 -->
                    <span v-if="item.msgType === 'text'">{{ item.msgContent.content }}</span>
                    <!-- 图片，表情 -->
                    <el-image
                      v-if="item.msgType === 'image' || item.msgType === 'emotion'"
                      :src="item.msgContent.content"
                      fit="cover"
                      :preview-src-list="item.srcList"></el-image>
                    <!-- 音频 -->
                    <div v-if="item.msgType === 'voice'" class="audio" @click="changePlay($event,item)">
                      <audio
                        ref="audio"
                        :src="item.msgContent.content"
                        @loadedmetadata="onLoadedMetaData($event,item)"
                        @timeupdate="onTimeUpdate($event,item)"
                      ></audio>
                      <div class="cricleplay">
                        <div class="small"></div>
                        <div :class="{middle:true,stopanimate:item.audio_play == false ? true : false}"></div>
                        <div :class="{large:true,stopanimate:item.audio_play == false ? true : false}"></div>
                      </div>
                      <div class="audio_duration">{{ parseInt(item.audio_duration) }}</div>
                    </div>
                    <!-- 视频 -->
                    <video
                      v-if="item.msgType === 'video'"
                      :src="item.msgContent.content"
                      controls
                      width="300" height="150"
                      style="object-fit: cover"
                    />
                    <!-- 链接 -->
                    <el-link
                      v-if="item.msgType === 'link'"
                      :href="item.msgContent.link_url"
                      target="_blank"
                      :underline="false">
                      <h4>{{ item.msgContent.title }}</h4>
                      <div class="description">
                        <div>{{ item.msgContent.description }}</div>
                        <img :src="item.msgContent.image_url"/>
                      </div>
                    </el-link>
                  </span>
                </div>
                <div class="talk_content_right" v-if="item.is_doctor === false">
                  <span
                    :class="{
                      talk_right:true,
                      talk_flex:item.msgContent && item.msgContent.length >= 30 ? true : false,
                      talk_image:item.msgType === 'image' || item.msgType === 'emotion' ? true : false,
                      talk_link:item.msgType === 'link' ? true : false,
                      talk_audio:item.msgType === 'voice' ? true : false,
                      talk_right_image:item.msgType === 'image' || item.msgType === 'emotion' ? true : false,
                      talk_right_link:item.msgType === 'link' ? true : false,
                      talk_right_video:item.msgType === 'video' ? true : false}">
                    <!-- 文字 -->
                    <span v-if="item.msgType === 'text'">{{ item.msgContent.content }}</span>
                    <!-- 图片，表情 -->
                    <el-image
                      v-if="item.msgType === 'image' || item.msgType === 'emotion'"
                      :src="item.msgContent.content"
                      fit="cover"
                      :preview-src-list="item.srcList"></el-image>
                    <!-- 音频 -->
                    <div v-if="item.msgType === 'voice'" class="audio" @click="changePlay($event,item)">
                      <audio
                        ref="audio"
                        :src="item.msgContent.content"
                        @loadedmetadata="onLoadedMetaData($event,item)"
                        @timeupdate="onTimeUpdate($event,item)"
                      ></audio>
                      <div class="cricleplay">
                        <div class="small"></div>
                        <div :class="{middle:true,stopanimate:item.audio_play === false ? true : false}"></div>
                        <div :class="{large:true,stopanimate:item.audio_play === false ? true : false}"></div>
                      </div>
                      <div class="audio_duration">{{ parseInt(item.audio_duration) }}</div>
                    </div>
                    <!-- 视频 -->
                    <video
                      v-if="item.msgType === 'video'"
                      :src="item.msgContent.content"
                      controls
                      width="300" height="150"
                      style="object-fit: cover"
                    />
                    <!-- 链接 -->
                    <el-link
                      v-if="item.msgType === 'link'"
                      :href="item.msgContent.link_url"
                      target="_blank"
                      :underline="false">
                      <h4>{{ item.msgContent.title }}</h4>
                      <div class="description">
                        <div>{{ item.msgContent.description }}</div>
                        <img :src="item.msgContent.image_url"/>
                      </div>
                    </el-link>
                  </span>
                  <span class="user_name_right" style="display:none">{{ item.user_name | subName }}</span>
                </div>
                <div
                  :class="{talk_time:item.is_doctor === false ? false : true,talk_time_right:item.is_doctor === true ? false : true}">
                  {{ item.msgTime }}
                </div>
              </div>
            </div>
            <div class="down">
            </div>
          </div>
          <div v-if="!wechat_info.length"
               style="font-size:14px;font-weight:400;padding-top:21px;padding-left:26px;box-sizing:border-box;">
            <span>暂无微信聊天记录</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="知识库" name="knowledgeBase">
        <el-tabs v-model="knowledgeBase" class="basic_content" @tab-click="getKnowledgeInfo">
          <el-tab-pane
            v-for="item in doctor_info.visitRecord"
            :key="item.project_id"
            :label="item.project_name"
            :name="item.project_id">
            <div class="search_knowledge">
              <el-input v-model="search_knowledge" placeholder="输入关键词" @input="searchKnowledgeInfo"></el-input>
              <img src="../assets/common/search.svg" alt="">
            </div>
            <div class="infinite-list-wrapper knowledge_list">
              <ul
                class="list"
                v-infinite-scroll="loadKnowledgeMore"
                infinite-scroll-disabled="knowledge_disabled"
                infinite-scroll-distance="100"
                infinite-scroll-immediate-check="false"
                style="list-style:none;margin:0;padding:0;">
                <li
                  class="block2 list-item knowledge_content"
                  style="padding: 10px 15px;margin-top: 17px"
                  v-for="item in knowledge_data"
                  :key="item.id">
                  <p style="font-size: 16px;font-weight:bold;margin-bottom:15px;"><span style="margin-right: 10px"
                                                                                        v-html="changeItemColor(item.question)">{{
                      item.question
                    }}</span>
                  </p>
                  <!-- <el-divider></el-divider> -->
                  <ul>
                    <li style="word-wrap:break-word;" v-html="changeItemColor(item.answer)">{{ item.answer }}</li>
                  </ul>
                </li>
              </ul>
              <p class="loading" v-if="knowledge_loading">加载中...</p>
              <p class="more" v-if="knowledgeNoMore">没有更多了</p>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="活动记录" name="activeRecord">
        <el-tabs v-model="doctorActiveRecord" class="basic_content active_record" @tab-click="getActiveRecordInfo">
          <el-tab-pane
            v-for="item in doctor_info.visitRecord"
            :key="item.project_id"
            :label="item.project_name"
            :name="item.project_id">
            <div class="active_search">
              <el-select
                class="active_type"
                v-model="activeType"
                clearable
                placeholder="请选择活动类型"
                @change="getSearchByActiveRecordInfo">
                <el-option class="active_option"
                           v-for="item in activeTypeList"
                           :key="item.resourceValue"
                           :label="item.resourceItem"
                           :value="item.resourceValue">
                </el-option>
              </el-select>
              <el-select
                class="participate_status"
                v-model="participateStatus"
                clearable
                placeholder="请选择参与状态"
                @change="getSearchByActiveRecordInfo">
                <el-option class="active_option"
                           v-for="item in participateStatusList"
                           :key="item.resourceValue"
                           :label="item.resourceItem"
                           :value="item.resourceValue">
                </el-option>
              </el-select>
              <div class="active_title">
                <el-input
                  v-model="activeTitle"
                  placeholder="请输入活动标题"
                  @input="getSearchByActiveRecordInfo">
                </el-input>
                <el-button type="primary" @click="getActiveRecordInfo">搜索</el-button>
              </div>
            </div>
            <div class="block2" style="padding: 10px 15px;margin-top: 10px" v-for="(item,index) in activity_record"
                 :key="index">
              <div class="active_type_invite">
                <p style="font-size: 14px;"><span
                  :style="{color:item.color}">[{{ item.activityType }}]&nbsp;&nbsp;</span><span>{{
                    item.activityTitle
                  }}</span>
                </p>
                <div class="invite_time">
                  <p>邀请时间</p>
                  <p>{{ item.inviteTime }}</p>
                </div>
              </div>
              <el-divider></el-divider>
              <div class="active_detail"
                   style="font-weight: 400;font-size: 13px;font-family: PingFangSC-Regular, PingFang SC;line-height: 20px;">
                <div class="active_status">
                  <p class="item">
                    <span class="label">活动状态：</span>
                    <span class="value">{{ item.activityStatus }}</span>
                    <span v-if="item.activityType == '直播' && (item.channelEndTime || item.channelStartTime)">
                      （直播时间
                      <span
                        v-if="item.channelEndTime && item.channelStartTime">{{
                          item.channelStartTime + '&nbsp;-&nbsp;' + item.channelEndTime
                        }}</span>
                      <span v-if="!item.channelEndTime && item.channelStartTime">{{ item.channelStartTime }}</span>
                      ）
                    </span>
                  </p>
                  <p class="item">
                    <span class="label">{{ item.duration }}：</span>
                    <span class="value" v-if="item.inviteStatus == 1">{{ item.attendLengthRes }}</span>
                    <span v-if="item.inviteStatus == 0" style="color:#EC808D">未查看</span>
                  </p>
                  <p class="item" v-if="item.inviteStatus == 1">
                    <span class="label">{{ item.time }}：</span>
                    <span class="value">{{ item.attendTime }}</span>
                  </p>
                </div>
                <el-tag
                  type="primary"
                  @click="show_questionnaire_detail(item)"
                  v-if="item.activityType == '问卷' && item.inviteStatus == 1">
                  查看答卷
                  <i class="el-icon-arrow-right"></i>
                </el-tag>
              </div>
            </div>
            <div class="load_more" v-if="active_is_show_load_more">
              <el-tag @click="loadActiveMore">加载更多</el-tag>
            </div>
            <div class="load_no_more" v-if="!active_is_show_load_more">
              <el-tag>没有更多了</el-tag>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
    <!-- 问卷详情页面 -->
    <questionnaireDetail
      v-if="is_questionnaire_detail"
      :is_supplement="is_supplement"
      :active_question_info="active_question_info"
      :doctor_info="doctor_info"/>
    <phone ref="callPhone" v-if="!is_questionnaire_detail"/>
  </div>
</template>

<script>
import Cookie from 'js-cookie';
import {api, baseAjax} from '../api/api';
import {statusCode} from '../utils/index';
import EncryUtil from "@/utils/encrypt";
import phone from '../element/phone';
import bus from '../assets/js/eventBus';
import questionnaireDetail from './questionnaire_detail';

export default {
  props: {
    //是否显示补填信息按钮  true-显示  false-隐藏
    is_supplement: {
      type: Boolean
    }
  },
  components: {
    phone,
    questionnaireDetail
  },
  data() {
    return {
      avatar: '',
      activeName: 'visitRecord',
      // activeName: 'activeRecord',
      activeVisit: '',
      doctorBasicLabel: '',
      knowledgeBase: '',
      doctorActiveRecord: '',   //活动记录
      user_info: {},
      visit_record: [],  //拜访记录
      visit_record_infos: [],
      doctor_basic_label: [],   //医生基础标签
      project_tag: [],   //医生标签-项目标签
      wechat_info: [],  //微信聊天记录信息
      wechat_rept_info: [],   //微信代表
      wechat_rept_name: '',   //选中的微信代表id
      wechat_rept_user: '',   //选中的微信代表名字
      is_multiple_wechat_rept: false,  //是否有多个微信代表
      wechat_page: {   //微信聊天记录页码
        current_page: 1,   //当前页
        total_pages: 0,   //总页数
        count: 0,   //总条数
        page_size: 0,   //每页显示条数
        up_page_count: 0   //当前页之前的总条数
      },
      doctor_info: {},  //医生信息
      //联系方式
      doctors_info: {},
      visit_loading: false,  //拜访记录-是否显示加载中
      disabled: true,   //拜访记录-是否可以滚动加载
      visit_record_total: 0,  //拜访记录-总页数
      visit_record_currentPage: 1,  //拜访记录-当前页
      visit_record_pageSize: 10,   //拜访记录-每页显示条数
      product_id: '',   //选中产品
      search_knowledge: '',   //知识库关键字搜索
      knowledge_data: [],  //知识库数据
      knowledge_datas: [],
      knowledge_currentPage: 1,   //知识库-当前页
      knowledge_totalPage: 0,   //知识库-总页数
      knowledge_pageSize: 10,  //知识库-每页条数
      knowledge_loading: false,  //知识库-是否显示加载中
      knowledge_disabled: true,   //知识库-是否可以滚动加载
      is_questionnaire_detail: false,   //是否显示问卷详情
      activity_record: [],   //活动记录列表
      activeType: '',   //活动记录-活动类型
      activeTypeList: [],   //活动类型下拉框值
      participateStatus: '',   //活动记录-参与状态
      participateStatusList: [],   //参与状态下拉框值
      activeTitle: '',   //活动记录-活动标题
      activity_record_page: {   //活动记录-分页
        currentPage: 1,
        pageSize: 10,
        totalPage: 0,
        total: 0
      },
      active_is_show_load_more: false,   //活动记录是否加载更多
      active_question_info: {},    //活动记录-问卷信息

      //邮箱
      contactBackup: '',
    }
  },
  mounted() {
    this.user_info = JSON.parse(this.EncryUtil.decryptByAES(Cookie.get('user_info')));
    this.doctor_info = JSON.parse(this.EncryUtil.decryptByAES(Cookie.get('doctor_info')));
    this.avatar = this.doctor_info.name[0];
    this.getVisitRecord();
    this.getDoctorBasicLabel();
    this.getWechatRept();  //获取微信代表
    this.get_doctor_product();  //获取医生对应产品
    this.getKnowledgeInfo();  //获取知识库数据
    this.getActivityType(); //获取活动类型
    this.getActivityStatus(); //获取参与状态
    this.getActiveRecordInfo();//获取医生活动记录
    this.getMailbox(this.doctor_info.doctorId)//邮箱
  },
  created() {
    let that = this;
    bus.$on('resetVisitRecord', (res) => {
      api.get_vist_record = {
        url: api.get_vist_record_url + '?productIdList=' + res.project_id + '&doctorId=' + res.doctorId + '&repId=' + this.user_info.repId,
        method: api.get_vist_record.method
      }
      baseAjax(api.get_vist_record, '', (res) => {
        if (res.code === statusCode.success) {
          that.visit_record_total = res.data.totalPage;
          that.visit_record = res.data.valueDoctor;
          that.visit_record.forEach(item => {
            item.callStatus = item.callStatus === 0 ? '未接通' : '接通';
            //代表是否与当前登录代表一样，如果一样，则可以补填，否则不可以补填
            item.is_supplement_visit = that.user_info.repId == item.repId ? true : false;
          });
        }
      });
    });

    this.doctors_info = {};
    bus.$on('getDoctorDetail', (res) => {
      that.doctors_info = res;
    });

    //显示基本信息内容
    bus.$on('isQuestionnaireDetail', (res) => {
      that.is_questionnaire_detail = res;
    });
  },
  computed: {
    //是否显示"没有更多"
    noMore() {
      return this.visit_record_currentPage >= this.visit_record_total;
    },
    //是否显示知识库"没有更多"
    knowledgeNoMore() {
      return this.knowledge_currentPage >= this.knowledge_totalPage;
    }
  },
  methods: {
    //加载拜访记录
    loadMore() {
      this.visit_loading = true;   //显示加载中
      this.disabled = true;  //禁止滚动加载
      setTimeout(() => {
        this.visit_record_currentPage = this.visit_record_currentPage + 1;
        this.getVisitRecord();
        if (this.visit_record_currentPage >= this.visit_record_total) {
          this.visit_loading = false;    //隐藏加载中
        }
      }, 2000)
    },
    //加载知识库
    loadKnowledgeMore() {
      this.knowledge_loading = true;   //显示加载中
      this.knowledge_disabled = true;  //禁止滚动加载
      setTimeout(() => {
        this.knowledge_currentPage = this.knowledge_currentPage + 1;
        this.getKnowledgeInfo();
        if (this.knowledge_currentPage >= this.knowledge_totalPage) {
          this.knowledge_loading = false;   //隐藏滚动加载
        }
      }, 300);
    },
    //获取医生拜访记录
    getVisitRecord(tab) {
      let that = this;
      if (tab) {   //判断是否点击tab
        //存储产品id
        this.product_id = !tab || tab.name === '0' ? '' : tab.name;
        //点击tab之后清空拜访记录数组
        this.visit_record = [];
        //点击tab之后当前页切换为第一页
        this.visit_record_currentPage = 1;
      }
      api.get_vist_record = {
        url: api.get_vist_record_url + '?productIdList=' + this.product_id + '&doctorId=' + this.doctor_info.doctorId + '&repId=' + this.user_info.repId + '&currentPage=' + this.visit_record_currentPage + '&pageSize=' + this.visit_record_pageSize,
        method: api.get_vist_record.method
      }
      baseAjax(api.get_vist_record, '', (res) => {
        if (res.code === statusCode.success) {
          that.visit_record_total = res.data.totalPage;
          that.visit_record_infos = res.data.valueDoctor;
          that.visit_record_infos.forEach(item => {
            item.callStatus = item.callStatus === 0 ? '未接通' : '接通';
            if (item.callStatus == '接通') {
              item.bgcolor = 'rgba(26, 179, 148, 0.2)';
              item.color = 'rgba(26, 179, 148, 1)';
            }
            if (item.callStatus == '未接通') {
              item.bgcolor = 'rgba(254, 159, 0, 0.2)';
              item.color = 'rgba(254, 159, 0, 1)';
            }
            item.is_supplement_visit = that.user_info.repId == item.repId ? true : false;
          });
          that.visit_record.push(that.visit_record_infos);
          that.visit_record = that.visit_record.flat();
          that.disabled = false;   //滚动加载
          if (that.visit_record_currentPage == that.visit_record_total) {
            that.disabled = true;  //当前页与总页数相等，禁止滚动加载
            that.visit_loading = false;    //隐藏加载中
          }
        }
      });
    },
    //获取医生基础标签
    getDoctorBasicLabel() {
      let that = this;
      api.visit_result_basic_label = {
        url: api.visit_result_basic_label_url + '?doctorId=' + this.doctor_info.doctorId,
        method: api.visit_result_basic_label.method
      };
      baseAjax(api.visit_result_basic_label, '', (res) => {
        if (res.code === statusCode.success) {
          that.dealBasicLabelList(res.data);
        }
      });
    },
    //处理基础标签
    dealBasicLabelList(info) {
      let that = this;
      let option_list = [];   //多选
      let options_name = '';   //单选
      // let options_number_name = '';   //数字
      // let options_text_name = '';  //文字
      this.doctor_basic_label = info;
      this.doctor_basic_label.forEach(item => {
        // console.log(item)
        item.tag_list = [];
        item.tagBaseList.forEach(val => {
          val.tagBaseOptionBeanList.forEach(value => {
            if (value.doctorChoose === true) {
              // if(val.tagType === 'number'){
              //   options_number_name = value.optionName;   //数字
              // }else if(val.tagType === 'text'){
              //   options_text_name = value.optionName;  //文字
              // }else
              if (val.tagType === 'radio') {
                options_name = value.optionName;
              } else if (val.tagType === 'checkbox') {
                option_list.push(value.optionName);
              }
            }
          });
          if (val.tagType === 'number' || val.tagType === 'text') {
            item.tag_list.push({
              tag_name: val.tagName,
              option_name: val.tagBaseOptionBeanList.length && val.tagBaseOptionBeanList[0].doctorChoose == true ? val.tagBaseOptionBeanList[0].optionName : ''
            });
          }
            // if(val.tagType === 'number'){
            //   item.tag_list.push({
            //     tag_name:val.tagName,
            //     option_name:options_number_name
            //   });
            // }else if(val.tagType === 'text'){
            //   item.tag_list.push({
            //     tag_name:val.tagName,
            //     option_name:options_text_name
            //   });
          // }else
          else if (val.tagType === 'checkbox') {
            item.tag_list.push({
              tag_name: val.tagName,
              option_name: option_list.join(',')
            });
          } else if (val.tagType === 'radio') {
            item.tag_list.push({
              tag_name: val.tagName,
              option_name: options_name
            });
          }
        });
      });
    },
    //获取医生项目标签
    getDoctorProjectLabel(tab) {
      let that = this;
      let productId = tab ? tab.name : 0;
      api.visit_result_product_label = {
        url: api.visit_result_product_label_url + '?doctorId=' + this.doctor_info.doctorId + '&repId=' + this.user_info.repId + '&productId=' + productId,
        method: api.visit_result_product_label.method
      };
      baseAjax(api.visit_result_product_label, '', (res) => {
        if (res.code === statusCode.success) {
          that.dealProjectLabelList(res.data);
        }
      });
    },
    //处理项目标签
    dealProjectLabelList(info) {
      let that = this;
      let option_list = [];   //多选
      let options_name = '';   //单选
      // let options_number_name = '';   //数字
      // let options_text_name = '';   //文字
      that.project_tag = info;
      that.project_tag.forEach(item => {
        item.tag_list = [];
        item.tagProductList.forEach(val => {
          val.tagProductOptionBeanList.forEach(value => {
            if (value.doctorChoose === true) {
              // if(val.tagType === 'number'){
              //   options_number_name = value.optionName;   //数字
              // }else if(val.tagType === 'text'){
              //   options_text_name = value.optionName;   //文字
              // }else
              if (val.tagType === 'radio') {
                options_name = value.optionName;
              } else if (val.tagType === 'checkbox') {
                option_list.push(value.optionName);
              }
            }
          });
          // if(val.tagType === 'number'){
          //   item.tag_list.push({
          //     tag_name:val.tagName,
          //     option_name:options_number_name
          //   });
          // }else if(val.tagType === 'text'){
          //   item.tag_list.push({
          //     tag_name:val.tagName,
          //     option_name:options_text_name
          //   });
          // }
          if (val.tagType === 'number' || val.tagType === 'text') {
            item.tag_list.push({
              tag_name: val.tagName,
              option_name: val.tagProductOptionBeanList.length && val.tagProductOptionBeanList[0].doctorChoose == true ? val.tagProductOptionBeanList[0].optionName : ''
            });
          } else if (val.tagType === 'checkbox') {
            item.tag_list.push({
              tag_name: val.tagName,
              option_name: option_list.join(',')
            });
          } else if (val.tagType === 'radio') {
            item.tag_list.push({
              tag_name: val.tagName,
              option_name: options_name
            });
          }
        });
        // console.log(that.project_tag)
      });
    },
    //获取微信代表
    getWechatRept() {
      let that = this;
      api.get_wechat_rept = {
        url: api.get_wechat_rept_url + this.doctor_info.doctorId,
        method: api.get_wechat_rept.method
      }
      baseAjax(api.get_wechat_rept, '', (res) => {
        if (res.code === statusCode.success) {
          that.wechat_rept_info = res.data;
          if (that.wechat_rept_info.length > 1) {
            that.is_multiple_wechat_rept = true;
          } else if (that.wechat_rept_info.length === 1) {
            that.wechat_rept_name = that.wechat_rept_info[0].repId;
            that.wechat_rept_user = that.wechat_rept_info[0].name;
          } else {
            that.is_multiple_wechat_rept = false;
          }
          that.getWechatTalkInfo(null);
        }
      });
    },
    //获取微信代表与医生聊天信息
    getWechatTalkInfo(wechat_rept_id) {
      this.wechat_info = [];
      let that = this;
      if (wechat_rept_id) {
        this.wechat_rept_info.forEach(rept => {
          if (wechat_rept_id === rept.repId) {
            that.wechat_rept_user = rept.name;
          }
        });
      }
      api.get_wechat_talk_info = {
        url: api.get_wechat_talk_info_url + '?repId=' + this.wechat_rept_name + '&doctroId=' + this.doctor_info.doctorId + '&wechatType=corp&page=' + this.wechat_page.current_page,
        method: api.get_wechat_talk_info.method
      }
      baseAjax(api.get_wechat_talk_info, '', (res) => {
        if (res.code === statusCode.success) {
          if (res.data) {
            let {wechatMsg, remark, repWechatId, currentPage, totalMsg, totalPages} = res.data;
            that.wechat_page_info = wechatMsg ? wechatMsg : [];
            that.wechat_page_info.forEach(item => {
              item.msgContent = JSON.parse(item.msgContent);
              if (item.msgType === 'image') {
                item.srcList = [
                  item.msgContent.content
                ];
              }
              item.user_name = item.from === repWechatId ? that.wechat_rept_user : this.doctor_info.name[0];
              item.is_doctor = item.from === repWechatId ? false : true;
              item.audio_duration = null;
              item.audio_play = false;
              item.audio_currentTime = null;
            });
            that.wechat_page.current_page = currentPage;
            that.wechat_page.total_pages = totalPages;
            that.wechat_page.count = totalMsg;
            that.wechat_page.page_size = that.wechat_page_info.length;
            if (that.wechat_page.current_page > 1 && that.wechat_page.current_page !== that.wechat_page.total_pages) {
              that.wechat_page.up_page_count = that.wechat_page.page_size * (that.wechat_page.current_page - 1);
            } else {
              that.wechat_page.up_page_count = that.wechat_page.count - that.wechat_page.page_size;
            }
            that.wechat_info.unshift(that.wechat_page_info.reverse());
            that.wechat_info = that.wechat_info.flat();
            let num = -1;
            that.wechat_info.forEach(val => {
              if (val.msgType === 'voice') {
                num = num + 1;
                val.voice_num = num;
              }
            });

            that.wechat_info.is_up = that.wechat_page.current_page === that.wechat_page.total_pages ? false : true;
          }
        }
      })
    },
    //获取微信聊天记录上一页数据
    get_up_page_info() {
      this.wechat_page.current_page = this.wechat_page.current_page === 1 ? 1 : this.wechat_page.current_page - 1;
      this.getWechatTalkInfo(null);
    },
    //获取微信聊天记录下一页数据
    get_next_page_info() {
      this.wechat_page.current_page = this.wechat_page.current_page === this.wechat_page.total_pages ? this.wechat_page.total_pages : this.wechat_page.current_page + 1;
      this.getWechatTalkInfo();
    },
    //录音总时长
    onLoadedMetaData(val, item) {
      item.audio_duration = val.target.duration;
      this.$set(item)
    },
    //改变播放按钮
    changePlay(val, item) {
      let that = this;
      if (item.audio_play === false) {
        item.audio_play = true;
        this.audioPlay(item.voice_num);
      } else if (item.audio_play === true) {
        item.audio_play = false;
        this.audioPause(item.voice_num);
      }
      this.$forceUpdate();
      this.$set(that.wechat_info, item)
    },
    //播放录音
    audioPlay(voice_num) {
      let val = this.$refs.audio;
      val[voice_num].play();
    },
    //暂停录音
    audioPause(voice_num) {
      let val = this.$refs.audio;
      val[voice_num].pause();
    },
    //更新当前播放时间
    onTimeUpdate(val, item) {
      let that = this;
      item.audio_currentTime = val.target.currentTime;
      if (item.audio_play === false) {
        item.audio_play = false;
      } else if (item.audio_play === true) {
        item.audio_play = item.audio_currentTime === item.audio_duration ? false : true;
      }
      this.$forceUpdate();
      this.$set(that.wechat_info, item)
    },
    //补填信息
    supplement_call_info(info) {
      new Promise((resolve) => {
        api.get_resource_item = {
          url: api.get_resource_item_url + 'purpose_type',
          method: api.get_resource_item.method
        }
        baseAjax(api.get_resource_item, '', (res) => {
          if (res.code === statusCode.success) {
            resolve(res.data);
          }
        });
      }).then((result) => {
        let purpose = [];
        if (info.isRecruit === 0 || info.isRecruit === null) {   //未招募
          purpose.push(result[0]);
        } else {  //已招募
          purpose = result.splice(1);
        }
        let visit_record_info = {
          project_id: info.productId,
          projectName: info.productName,
          purpose: purpose,
          sinToken: info.sinToken,
          doctorId: this.doctor_info.doctorId
        };
        Cookie.set('visit_record_info', this.EncryUtil.encryptByAES(JSON.stringify(visit_record_info)), {expires: 24 * 60 * 60 * 1000});
        Cookie.set('supplement', true, {expires: 24 * 60 * 60 * 1000});
        if (info.callStatus === '未接通') {
          this.$store.state.calls.is_deal_promit = true;
          //修改未接通弹框头部标题
          bus.$emit('callOutTitle', '补填信息');
        } else {
          this.$router.push('/calling');
        }
      });
    },
    //拜访登记
    visitRegistration() {
      let data = {
        doctorId: this.doctor_info.doctorId,
        doctorName: this.doctor_info.name,
        gender: this.doctor_info.sex,
        techTitle: this.doctor_info.position,
        academicTitle: "",
        executeTitle: this.doctor_info.executeTitle,
        doctorHospital: this.doctor_info.hospital,
        doctorDept: this.doctor_info.department,
        hcoProvince: this.doctor_info.hcoProvince,
        hcoCity: this.doctor_info.hcoCity,
        callEndTimeLast: "",
        callDurationLast: "",
        repNameLast: this.user_info.name,
        callRecordResultLast: "",
        callRecordProductLast: "",
        doctorContact: this.doctor_info.concat,
        doctorProductResponse: [],
        type: '拜访登记',
      }
      this.$emit('returnDrawer', false);
      bus.$emit('getDoctorDetail', data);
    },
    //获取医生对应产品
    get_doctor_product() {
      let that = this;
      let project_list = [];
      //拜访记录第一个tab文案是全部
      let visitRecord = [{
        project_name: '全部',
        project_id: ''
      }];
      api.get_doctor_project_list = {
        url: api.get_doctor_project_list_url + this.doctor_info.doctorId,
        method: api.get_doctor_project_list.method
      };
      baseAjax(api.get_doctor_project_list, '', (res) => {
        if (res.code === statusCode.success) {
          res.data.forEach(item => {
            project_list.push({
              project_name: item.name,
              project_id: '' + item.id
            });
          });
          that.doctor_info.project = project_list;
          visitRecord.push(project_list);
          that.doctor_info.visitRecord = visitRecord.flat();
        }
      });
    },
    //获取知识库数据
    getKnowledgeInfo(tab) {
      let that = this;
      if (tab) {   //判断是否点击tab
        //存储产品id
        this.product_id = !tab || tab.name === '0' ? '' : tab.name;
        //点击tab之后清空知识库数组
        this.knowledge_data = [];
        //点击tab之后当前页切换为第一页
        this.knowledge_currentPage = 1;
      }
      let data = {
        productId: this.product_id,
        question: this.search_knowledge,
        currentPage: this.knowledge_currentPage,
        pageSize: this.knowledge_pageSize
      };
      baseAjax(api.get_question_list, data, (res) => {
        if (res.code === statusCode.success) {
          that.knowledge_totalPage = res.data.totalPage;
          that.knowledge_datas = res.data.value;
          that.knowledge_data.push(that.knowledge_datas);
          that.knowledge_data = that.knowledge_data.flat();
          that.knowledge_disabled = false;  //滚动加载
          if (that.knowledge_currentPage == that.knowledge_totalPage) {
            that.knowledge_disabled = true;  //当前页与总页数相等，禁止滚动加载
            that.knowledge_loading = false;   //隐藏滚动加载
          }
        }
      });
    },
    //知识库关键字搜索
    searchKnowledgeInfo() {
      this.knowledge_currentPage = 0;
      if (this.search_knowledge) {
        this.knowledge_data = [];
      } else {
        this.knowledge_data = [];
      }
      this.loadKnowledgeMore();
    },
    //知识库搜索后文字高亮
    changeItemColor(val) {
      if (this.search_knowledge.length > 0) {
        let search_knowledge = this.search_knowledge.split("");
        val = val + "";
        search_knowledge.forEach(item => {
          if (val.indexOf(item) !== -1 && item !== "") {
            val = val.replace(
              new RegExp(this.search_knowledge, 'g'),
              '<font color="#FF9933">' + this.search_knowledge + "</font>"
            );
          }
        });
        return val;
      } else {
        return val;
      }
    },
    //加载活动记录
    loadActiveMore() {
      this.activity_record_page.currentPage = this.activity_record_page.currentPage + 1;
      this.getActiveRecordInfo();
    },
    //获取活动记录信息
    getActiveRecordInfo(tab) {
      let that = this;
      this.product_id = 0;
      if (tab) {   //判断是否点击tab
        this.product_id = !tab || tab.name === 0 ? 0 : tab.name;
        //点击tab之后清空活动记录数组
        this.activity_record = [];
        //点击tab之后当前页切换为第一页
        this.activity_record_page.currentPage = 1;
      }
      let data = {
        productId: this.product_id == undefined ? 0 : Number(this.product_id),
        doctorId: Number(this.doctor_info.doctorId),
        activityType: this.activeType,
        inviteStatus: this.participateStatus ? this.participateStatus : '2',
        activityTitle: this.activeTitle,
        pageSize: this.activity_record_page.pageSize,
        currentPage: this.activity_record_page.currentPage
      };

      baseAjax(api.get_doctor_activity_record, data, (res) => {
        if (res.code === statusCode.success) {
          let {currentPage, pageSize, totalPage, count, value} = res.data;
          that.activity_record_page.total = count;
          that.activity_record_page.currentPage = currentPage;
          that.activity_record_page.pageSize = pageSize;
          that.activity_record_page.totalPage = totalPage;
          if (that.activity_record_page.totalPage == that.activity_record_page.currentPage) {   //总页数=当前页
            that.active_is_show_load_more = false;
          } else {
            that.active_is_show_load_more = true;
          }
          value.forEach(item => {
            if (item.activityType == 'questionnaire') {
              item.activityType = '问卷';
              item.color = '#F59A23';
              item.duration = '答题时长';
              item.time = '答题时间';
            } else if (item.activityType == 'live') {
              item.activityType = '直播';
              item.color = '#00BFBF';
              item.duration = '参会时长';
              item.time = '参会时间';
            } else if (item.activityType == 'demand') {
              item.activityType = '点播';
              item.color = '#02A7F0';
              item.duration = '观看时长';
              item.time = '观看时间';
            } else if (item.activityType == 'article') {
              item.activityType = '文章';
              item.color = '#6C82F3';
              item.duration = '阅读时长';
              item.time = '阅读时间';
            }
          });
          that.activity_record.push(value);
          that.activity_record = that.activity_record.flat();
        }
      });
    },
    //根据活动类型查询活动记录
    getSearchByActiveRecordInfo() {
      this.activity_record = [];
      this.activity_record_page.currentPage = 1;
      this.getActiveRecordInfo();
    },
    //查看问卷详情
    show_questionnaire_detail(info) {
      this.active_question_info = info;
      this.is_questionnaire_detail = true;
      this.$emit('showQuestionnaireDetail');
    },
    //获取活动类型
    getActivityType() {
      let that = this;
      api.get_resource_item = {
        url: api.get_resource_item_url + 'activity_type',
        method: api.get_resource_item.method
      };
      baseAjax(api.get_resource_item, '', (res) => {
        if (res.code === statusCode.success) {
          that.activeTypeList = res.data;
        }
      });
    },
    //获取活动状态
    getActivityStatus() {
      let that = this;
      api.get_resource_item = {
        url: api.get_resource_item_url + 'activity_invite_status',
        method: api.get_resource_item.method
      };
      baseAjax(api.get_resource_item, '', (res) => {
        if (res.code === statusCode.success) {
          that.participateStatusList = res.data;
        }
      });
    },
    //获取邮箱
    getMailbox(doctorId) {
      let that = this;
      let doctor_contact = {
        url: '/contact/doctor_contact?doctorId=' + doctorId + '&type=2',
        method: 'GET'
      };
      baseAjax(doctor_contact, '', (res) => {
        if (res.code === statusCode.success) {
          console.log(res.data.contactBackup)
          this.contactBackup = res.data.contactBackup
        }
      });
    },


  }
}
</script>
<style lang="less" scoped>
  /deep/.el-input.el-input--suffix.is-focus>.el-input__inner{
    border-color:#2A82E2;
  }
  /deep/.el-input__inner:focus{
    border-color:#2A82E2 !important;
  }
  /deep/.el-range-editor.is-active{
    border-color:#2A82E2 !important;
  }
.basic_info {
  padding: 0 30px;
  box-sizing: border-box;

  .el-row {
    background-color: #FFFFFF !important;
    margin-bottom: 17px !important;

    .el-col {
      position:relative;
      .doctor_avtar {
        height: 82px;
        width: 82px;
        color: #000;
        background-color: #C0C4CC;
        box-sizing: border-box;
        text-align: center;
        border-radius: 4px;
        font-size: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 300;
      }

      .specific_info {
        .doctor_name {
          display: flex;
          align-items: center;
          font-size: 24px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #595959;
          margin-bottom: 18px;

          span {
            margin-right: 8px;
          }

          img {
            margin-top: 6px;
          }

          .el-tag {
            background-color: #27DAAD;
            border-color: #27DAAD;
            border-radius: 2px;
            margin-left: 15px;
          }
        }

        .hospital, .department {
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #878787;
          margin-bottom: 10px;
          padding-left: 17px;
          box-sizing: border-box;
          background-repeat: no-repeat;
          background-position: 0 center;
        }

        .hospital {
          background-image: url('../assets/common/hospital.svg');
        }

        .department {
          background-image: url('../assets/common/department.svg');
        }

        .el-tag--dark.el-tag--success {
          height: 34px;
          background-color: rgba(42, 130, 226, 0.12);
          border-radius: 2px;
          border-color: transparent;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(42, 130, 226, 1);
          display: inline-flex;
          align-items: center;
          padding: 0 13px;
        }

        .unknow_info {
          width: 35px;
          height: 18px;
          background-color: #FFA940;
          border-radius: 2px;
          font-size: 11px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
      // .visit_registration{
      //   position:absolute;
      //   top:0;
      //   right:0;
      //   .el-button{
      //     height: 32px;
      //     background: #2A82E2;
      //     border-radius: 16px;
      //     border-color:transparent;
      //     font-size: 13px;
      //     font-family: PingFangSC-Regular, PingFang SC;
      //     font-weight: 400;
      //     color: #FFFFFF;
      //     padding:7px 9px;
      //     box-sizing:border-box;
      //     span{
      //       display:inline-flex;
      //       align-items:center;
      //       img{
      //         margin-right:6px;
      //       }
      //       span{
      //         transform: translateY(-1px);
      //       }
      //     }
      //   }
      // }
    }
  }

  /deep/ .el-tabs {
    .el-tabs__header {
      margin-bottom: 20px;

      .el-tabs__nav-wrap {
        .el-tabs__nav-scroll {
          .el-tabs__nav {
            .el-tabs__item {
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #2B3A4F;
            }

            .el-tabs__item.is-active {
              color: rgba(42, 130, 226, 1);
            }

            .el-tabs__active-bar {
              height: 3px;
              background-color: rgba(42, 130, 226, 1);
              border-radius: 4px;
            }
          }
        }
      }

      .el-tabs__nav-wrap::after {
        height: 1px;
      }
    }

    .el-tabs__content {
      .el-tab-pane {
        overflow: hidden;

        .wechat_rept {
          margin-bottom: 12px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(0, 0, 0, 0.9);

          .name {
            padding-right: 10px;
          }

          .el-select {
            .el-input {
              .el-input__inner {
                height: 33px;
                width: 154px;
                border-radius: 2px;
                border: 1px solid #DDDFE6;
              }

              .el-input__suffix {
                .el-input__suffix-inner {
                  .el-input__icon {
                    line-height: 33px;
                  }
                }
              }
            }
          }
        }

        .basic_content {
          min-height: 600px;
          max-height: 600px;
          overflow-x: hidden;
          overflow-y: scroll;
          padding: 0;

          .el-tabs__header {
            .el-tabs__nav-wrap {
              .el-tabs__nav-scroll {
                .el-tabs__nav {
                  .el-tabs__item {
                    height: 24px;
                    line-height: 30px;
                    background-color: #fff;
                    margin-right: 20px;
                    font-size: 12px;
                    padding: 0 16px;
                    border-radius: 2px;
                    border: 1px solid #DDDFE6;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(0, 0, 0, 0.7);
                    display: inline-flex;
                    align-items: center;
                  }

                  .el-tabs__item:hover{
                    color: #2A82E2;
                  }

                  .el-tabs__item.is-active {
                    background-color: rgba(42, 130, 226, 1);
                    color: #fff;
                    border-color: transparent;
                  }

                  div:nth-child(2) {
                    padding-left: 13px;
                  }

                  div:last-child {
                    padding-right: 13px;
                  }

                  .el-tabs__active-bar {
                    background-color: transparent;
                  }
                }
              }
            }

            .el-tabs__nav-wrap::after {
              background-color: transparent;
            }
          }

          .el-tabs__content {
            .el-tab-pane {
              .block2 {
                margin-bottom: 12px;
                padding: 17px 20px !important;
                // height: 200px;
                background-color: rgba(240, 242, 245, 0.5);
                border-radius: 2px;
                box-sizing: border-box;
                margin-top: 0 !important;

                P {
                  margin: 0;

                  .el-tag {
                    height: 20px;
                    border-radius: 1px;
                    border-color: transparent;
                    font-size: 12px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    padding: 0 15px;
                  }
                }

                .item {
                  font-size: 14px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  line-height: 12px;

                  .label {
                    color: #999999;
                  }

                  .value {
                    color: #333333;
                  }
                }

                .project_item {
                  padding-left: 20px;
                }

                .project_item:first-child {
                  padding-top: 20px;
                }

                .project_item:last-child {
                  padding-bottom: 15px;
                }

                ul {
                  list-style-type: disc;
                }

                .active_type_invite {
                  display: flex;
                  justify-content: space-between;

                  .invite_time {
                    width: 155px;

                    p {
                      text-align: right;
                      font-size: 12px;
                      font-weight: 400;
                      color: #2B3A4F;
                    }

                    p:first-child {
                      margin-bottom: 0;
                      margin-top: 3px;
                    }

                    p:last-child {
                      margin-top: 5px;
                      margin-bottom: 0;
                    }
                  }
                }

                .active_detail {
                  display: flex;
                  justify-content: space-between;
                  position: relative;

                  .el-tag {
                    background-color: transparent;
                    border-color: transparent;
                    border: 0;
                    color: rgb(64, 158, 255);
                    padding: 0;
                    cursor: pointer;
                    position: absolute;
                    right: 0;
                    bottom: 8px;
                    font-size: 13px;
                  }
                }
              }

              .supplement {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(42, 130, 226, 1);
                background-color: transparent;
                border-color: transparent;
                position: absolute;
                right: 30px;
                cursor: pointer;
                background-image: url('../assets/common/pen-blue.svg');
                background-repeat: no-repeat;
                background-position: 0 center;
                padding-left: 16px;
                box-sizing: border-box;
              }

              .search_knowledge {
                position: relative;

                .el-input__inner {
                  height: 40px;
                  background-color: rgba(240, 242, 245, 0.5);
                  border-radius: 2px;
                  border-color: transparent;
                  margin-bottom: 12px;
                  padding: 0 19px;
                  box-sizing: border-box;
                }

                img {
                  position: absolute;
                  top: 22%;
                  right: 19px;
                }
              }

              .knowledge_content {
                ul, li {
                  list-style: none;
                }

                ul {
                  padding: 0;

                  li {
                    line-height: 22px;
                  }
                }
              }
            }
          }

          .wx_chat_record {
            width: 100%;
            height: 600px;
            background-color: #F8F9FB;
            position: relative;
            display: flex;
            flex-direction: column;

            .up {
              height: 33px;
              display: flex;
              justify-content: center;
              align-items: flex-end;

              div {
                width: 143px;
                height: 40px;
                border-radius: 25px;
                border: 1px solid #E6EDFE;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #3B4859;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;

                img {
                  margin-right: 12px;
                }
              }
            }

            .content {
              padding: 0px 20px;
              overflow: auto;
              height: 91%;

              .main {
                margin-bottom: 12px;

                .talk_content {
                  display: flex;
                  align-items: center;

                  .user_name {
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;
                    width: 40px;
                    height: 40px;
                    background-color: #3B7CFF;
                    border-radius: 50%;
                    font-size: 17px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 500;
                    color: #FFFFFF;
                    margin-right: 12px;
                  }

                  .talk {
                    display: inline-flex;
                    align-items: center;
                    padding: 12px 16px;
                    border: 1px solid #E6EDFE;
                    box-sizing: border-box;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(51, 51, 51, 1);
                    position: relative;
                    background-color: rgba(227, 231, 234, 1);
                    border-radius: 40px 40px 40px 1px;

                    .audio {
                      display: flex;
                      align-items: center;
                      transform: translateX(-20px);

                      .small {
                        width: 20px;
                        height: 14px;
                        border-style: solid;
                        border-top-color: transparent;
                        border-left-color: transparent;
                        border-bottom-color: transparent;
                        border-radius: 50%;
                        box-sizing: border-box;
                        vertical-align: middle;
                        display: inline-block;
                        color: #A2A2A2;
                      }

                      .middle {
                        width: 30px;
                        height: 24px;
                        border-style: solid;
                        border-top-color: transparent;
                        border-left-color: transparent;
                        border-bottom-color: transparent;
                        border-radius: 50%;
                        box-sizing: border-box;
                        vertical-align: middle;
                        display: inline-block;
                        margin-left: -22px;
                        animation: show2 3s ease-in-out infinite;
                        opacity: 1;
                        color: #A2A2A2;
                      }

                      @keyframes show2 {
                        0% {
                          opacity: 0;
                        }
                        30% {
                          opacity: 1;
                        }
                        100% {
                          opacity: 0;
                        }
                      }

                      .cricleplay {
                        width: 100%;
                        margin-right: 23px;
                      }

                      .large {
                        width: 40px;
                        height: 34px;
                        border-style: solid;
                        border-top-color: transparent;
                        border-left-color: transparent;
                        border-bottom-color: transparent;
                        border-top-color: transparent;
                        border-radius: 50%;
                        box-sizing: border-box;
                        vertical-align: middle;
                        display: inline-block;
                        margin-left: -32px;
                        animation: show3 3s ease-in-out infinite;
                        opacity: 1;
                        color: #A2A2A2;
                      }

                      @keyframes show3 {
                        0% {
                          opacity: 0;
                        }
                        60% {
                          opacity: 1;
                        }
                        100% {
                          opacity: 0;
                        }
                      }

                      .stopanimate {
                        animation-name: none;
                      }
                    }

                    .el-link.el-link--default {
                      color: rgba(51, 51, 51, 1);
                    }
                  }

                  .talk::before {
                    content: "";
                    width: 0px;
                    height: 0px;
                    border-top: 8px solid transparent;
                    border-left: 30px solid transparent;
                    border-right: 8px solid #E6EDFE;
                    border-bottom: 8px solid transparent;
                    position: absolute;
                    left: -38px;
                    display: none;
                  }

                  .talk::after {
                    content: "";
                    width: 0px;
                    height: 0px;
                    border-top: 8px solid transparent;
                    border-left: 30px solid transparent;
                    border-right: 8px solid #FFFFFF;
                    border-bottom: 8px solid transparent;
                    position: absolute;
                    left: -37px;
                    display: none;
                  }

                  .talk_left_image, .talk_left_video, .talk_left_link {
                    border-radius: 15px 15px 15px 1px;
                  }
                }

                .talk_time {
                  font-size: 12px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #8998AC;
                  margin-top: 4px;
                }
              }

              .main_right {
                margin-bottom: 12px;
                display: flex;
                flex-direction: column;

                .talk_content_right {
                  align-self: flex-end;
                  display: flex;
                  align-items: center;
                  justify-content: flex-end;

                  .user_name_right {
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;
                    width: 40px;
                    height: 40px;
                    background-color: #27DAAD;
                    border-radius: 50%;
                    font-size: 17px;
                    font-family: PingFangSC-Semibold, PingFang SC;
                    font-weight: 500;
                    color: #FFFFFF;
                    margin-left: 12px;
                  }

                  .talk_right {
                    display: inline-flex;
                    align-items: center;
                    padding: 12px 16px;
                    border: 1px solid #E6EDFE;
                    box-sizing: border-box;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: rgba(51, 51, 51, 1);
                    position: relative;
                    background-color: rgba(217, 236, 254, 1);
                    border-radius: 40px 40px 1px 40px;

                    .el-link.el-link--default {
                      color: rgba(51, 51, 51, 1);
                    }

                    .audio {
                      display: flex;
                      align-items: center;
                      transform: translateX(-20px);

                      .small {
                        width: 20px;
                        height: 14px;
                        border-style: solid;
                        border-top-color: transparent;
                        border-left-color: transparent;
                        border-bottom-color: transparent;
                        border-radius: 50%;
                        box-sizing: border-box;
                        vertical-align: middle;
                        display: inline-block;
                        color: #A2A2A2;
                      }

                      .middle {
                        width: 30px;
                        height: 24px;
                        border-style: solid;
                        border-top-color: transparent;
                        border-left-color: transparent;
                        border-bottom-color: transparent;
                        border-radius: 50%;
                        box-sizing: border-box;
                        vertical-align: middle;
                        display: inline-block;
                        margin-left: -22px;
                        animation: show2 3s ease-in-out infinite;
                        opacity: 1;
                        color: #A2A2A2;
                      }

                      @keyframes show2 {
                        0% {
                          opacity: 0;
                        }
                        30% {
                          opacity: 1;
                        }
                        100% {
                          opacity: 0;
                        }
                      }

                      .cricleplay {
                        width: 100%;
                        margin-right: 23px;
                      }

                      .large {
                        width: 40px;
                        height: 34px;
                        border-style: solid;
                        border-top-color: transparent;
                        border-left-color: transparent;
                        border-bottom-color: transparent;
                        border-top-color: transparent;
                        border-radius: 50%;
                        box-sizing: border-box;
                        vertical-align: middle;
                        display: inline-block;
                        margin-left: -32px;
                        animation: show3 3s ease-in-out infinite;
                        opacity: 1;
                        color: #A2A2A2;
                      }

                      @keyframes show3 {
                        0% {
                          opacity: 0;
                        }
                        60% {
                          opacity: 1;
                        }
                        100% {
                          opacity: 0;
                        }
                      }

                      .stopanimate {
                        animation-name: none;
                      }
                    }
                  }

                  .talk_right::before {
                    content: "";
                    width: 0px;
                    height: 0px;
                    border-top: 8px solid transparent;
                    border-left: 8px solid #E6EDFE;
                    border-right: 8px solid transparent;
                    border-bottom: 8px solid transparent;
                    position: absolute;
                    right: -16px;
                    display: none;
                  }

                  .talk_right_link, .talk_right_image, .talk_right_video {
                    border-radius: 15px 15px 1px 15px;
                  }
                }

                .talk_time_right {
                  align-self: flex-end;
                  font-size: 12px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #8998AC;
                  margin-top: 4px;
                }
              }

              .talk_flex {
                flex: 1;
              }

              .talk_image {
                width: 20%;
                height: 20%;

                .el-image-viewer__wrapper {
                  .el-image-viewer__close {
                    color: #fff;
                  }
                }
              }

              .talk_link {
                width: 230px;
                // border-radius:15px 15px 1px 15px !important;

                .el-link {
                  width: 100%;

                  .el-link--inner {
                    width: 100%;

                    h4 {
                      margin-top: 0;
                      margin-bottom: 13px;
                      font-size: 14px;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      display: -webkit-box;
                      -webkit-box-orient: vertical;
                      -webkit-line-clamp: 2;
                    }

                    .description {
                      display: flex;

                      div {
                        width: 142px;
                        height: 40px;
                        margin-right: 10px;
                        font-size: 12px;
                        color: #a5a5a5;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 3;
                      }

                      img {
                        width: 42px;
                        height: 42px;
                      }
                    }
                  }
                }
              }

              .talk_audio {
                height: 37px;
                cursor: pointer;
              }
            }

            .content::-webkit-scrollbar {
              display: none;
            }

            .down {
              width: 100%;
              position: absolute;
              bottom: 11px;

              div {
                display: flex;
                justify-content: center;
                align-items: center;

                img {
                  cursor: pointer;
                }
              }
            }
          }
        }

        .active_record {
          .active_search {
            display: flex;
            margin-bottom: 12px;

            .el-select {
              width: 146px !important;

              .el-input {
                width: 100%;

                .el-input__inner {
                  height: 32px;
                  border-radius: 2px;
                  border: 1px solid #DDDFE6;
                }

                .el-input__suffix {
                  .el-input__suffix-inner {
                    .el-input__icon {
                      line-height: 32px;
                    }
                  }
                }
              }
            }

            .el-input {
              width: 170px;

              .el-input__inner {
                height: 32px;
                border-radius: 2px;
                border: 1px solid #DDDFE6;
              }
            }

            .active_type, .participate_status {
              margin-right: 15px;
            }

            .active_title {
              display: flex;

              .el-button {
                height: 32px;
                background-color: #2A82E2;
                border-radius: 2px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-color: transparent;
                margin-left: 15px;
                padding: 6px 18px;
              }
            }
          }

          .active_detail {
            margin-top: 17px;
          }

          .load_more {
            display: flex;
            justify-content: center;

            .el-tag {
              border-color: transparent;
              background-color: transparent;
              cursor: pointer;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #2A82E2;
            }
          }

          .load_no_more {
            display: flex;
            justify-content: center;

            .el-tag {
              border-color: transparent;
              background-color: transparent;
              font-size: 14px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #333333;
            }
          }
        }

        .basic_content::-webkit-scrollbar {
          display: none;
        }

        .infinite-list-wrapper {
          .more, .loading {
            text-align: center;
            font-weight: 400;
            color: #2B3A4F;
            font-family: PingFangSC-Regular, "PingFang SC";
          }
        }
      }
    }
  }
}

.block2 {
  background-color: #F8F9FB;
}

.block {
  background-color: #FFFFFF;
  padding: 20px 15px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.queryCriteria {
  position: absolute;
  right: 30px;
}

.doctorInformation {
  text-align: left;
}

.el-button--text {
  color: #52C41A;
}

/deep/ :focus {
  outline: 0;
}

.item {
  line-height: 10px;

  .label {
    display: inline-block;
    height: 100%;
    // width: 70px;
    // text-align: justify;
    vertical-align: top;
    color: #2B3A4F;

    &::after {
      display: inline-block;
      width: 100%;
      content: '';
      height: 0;
    }
  }

  .value {
    padding-right: 10px;
  }
}

.content {
  padding: 8px 10px 0px 10px;
  overflow: auto;
  height: 91%;
  font-size: 13px;

  .main {
    margin-bottom: 12px;

    .talk_content {
      display: flex;
      align-items: center;

      .user_name {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        background-color: #3B7CFF;
        border-radius: 50%;
        font-size: 17px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        margin-right: 12px;
      }

      .talk {
        display: inline-flex;
        align-items: center;
        background-color: #FFFFFF;
        border-radius: 8px;
        padding: 10px 16px 10px 16px;
        border: 1px solid #E6EDFE;
        box-sizing: border-box;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        position: relative;
      }

      .talk::before {
        content: "";
        width: 0px;
        height: 0px;
        border-top: 8px solid transparent;
        border-left: 30px solid transparent;
        border-right: 8px solid #E6EDFE;
        border-bottom: 8px solid transparent;
        position: absolute;
        left: -38px;
      }

      .talk::after {
        content: "";
        width: 0px;
        height: 0px;
        border-top: 8px solid transparent;
        border-left: 30px solid transparent;
        border-right: 8px solid #FFFFFF;
        border-bottom: 8px solid transparent;
        position: absolute;
        left: -37px;
      }
    }

    .talk_time {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #8998AC;
      margin-top: 4px;
    }
  }

  .main_right {
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;

    .talk_content_right {
      align-self: flex-end;
      display: flex;
      align-items: center;

      .user_name_right {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        height: 40px;
        background-color: #27DAAD;
        border-radius: 50%;
        font-size: 17px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        margin-left: 12px;
      }

      .talk_right {
        display: inline-flex;
        align-items: center;
        background-color: #E6EDFE;
        border-radius: 8px;
        padding: 10px 16px 10px 16px;
        border: 1px solid #E6EDFE;
        box-sizing: border-box;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #2B3A4F;
        position: relative;
      }

      .talk_right::before {
        content: "";
        width: 0px;
        height: 0px;
        border-top: 8px solid transparent;
        border-left: 8px solid #E6EDFE;
        border-right: 8px solid transparent;
        border-bottom: 8px solid transparent;
        position: absolute;
        right: -16px;
      }
    }

    .talk_time_right {
      align-self: flex-end;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #8998AC;
      margin-top: 4px;
    }
  }

  .talk_flex {
    flex: 1;
  }
}

/deep/ .el-radio-button {
  margin: 0 10px;
  border: 1px solid #DCDFE6;
  border-radius: 5px;

  span {
    border: none;
  }

  .el-radio-button__inner {
    border: none !important;
    border-radius: 5px !important;
  }
}

.questionnaire {
  /deep/ input {
    border: none;
    background-color: #F8F9FB;
  }
}

ul {
  list-style-type: square;
}

ul > li {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2B3A4F;
  // line-height: 20px;
}

.el-divider--horizontal {
  margin: 0;
}

.is-selected {
  color: #1989FA;
}

.box {
  min-height: 600px;
  max-height: 600px;
  overflow-x: hidden;
  overflow-y: scroll;

  .el-input {
    width: 207px;
    margin-top: 10px;

    .el-input__inner {
      width: 100%;
      height: 32px;
    }
  }
}

.box::-webkit-scrollbar {
  display: none;
}

.is-today span {
  display: inline-block;
  width: 31px;
  height: 31px;
  border-radius: 50px;
  background-color: #3B7CFF;
  color: #ffffff;
  text-align: center;
  line-height: 31px;
}


//拜访登记
.el-dialog {

  .visit_info {
    .visit_purpose, .doctor_info, .product, .concat {
      display: flex;
      margin-bottom: 16px;

      .title {
        font-size: 14px;
        font-weight: 400;
        margin-right: 11px;
      }
    }

    .product, .concat {

      display: flex;
      align-items: center;
    }

    .visit_purpose {
      margin-bottom: 16px;

      .title {
        margin-right: 3px;
      }

      /deep/ .el-checkbox-group {
        .el-checkbox {
          position: relative;
          margin-bottom: 8px;
          margin-right: 8px;

          .el-checkbox__input {
            position: absolute;
            right: 0;
            bottom: -3px;

            .el-checkbox__inner {
              border-color: transparent;
              background-color: transparent;
            }

            .el-checkbox__inner::after {
              width: 6px;
              height: 10px;
              left: -1px;
              top: -2px;
            }
          }

          .el-checkbox__input.is-checked .el-checkbox__inner {
            border: 10px solid transparent;
            border-right: 10px solid #409EFF;
            border-bottom: 10px solid #409EFF;
            border-bottom-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 4px;
            width: 0;
            background-color: transparent;
          }

          .el-checkbox__input.is-checked + .el-checkbox__label {
            color: #409EFF;
          }

          .el-checkbox__label {
            transform: translateY(-4px);
            font-size: 14px;
            font-weight: 400;
            color: #8998AC;
          }
        }

        .el-checkbox.is-bordered {
          height: 32px;
          padding: 10px 16px 5px 10px;
        }

        .el-checkbox.is-bordered + .el-checkbox.is-bordered {
          margin-left: 0;
        }

        .el-checkbox.is-bordered.is-checked {
          border-color: #409EFF;
        }

        .el-checkbox.is-bordered + .el-checkbox.is-bordered {
          margin-left: 0;
        }
      }
    }

    .doctor_info {
      margin-top: -6px;

      .doctor_detail {
        width: 100%;
        font-size: 14px;
        font-weight: 400;
        background-color: #F8F9FB;
        border-radius: 5px;
        padding: 18px 0 0 14px;

        div {
          margin-bottom: 18px;
        }
      }
    }
  }
}

.active_option {
  line-height: 33px;
}

</style>
